<template>
	<view class="container">
		
		<view class="tabbox">
			<view class="tab-item f32 c666 tCenter" v-for="(item,index) in tabList" :key="index" :class="[selectTab == index ? 'active' : '']" @tap="setSelectTab(index)">
				{{item.name}}
			</view>
		</view>
		
		<view class="order-list">
			
			<view class="order-item">
				<view class="top">
					<view class="number f32 c333">订单号：1828743646475</view>
					<view class="pend f30"><text>订</text>待审核</view>
				</view>
				<view class="bottom">
					<view class="time f32 c666">下单时间：2020-03-23 16:23:34</view>
					<view class="box">
						<view class="prie f32 c333">金额：¥23.00</view>
						<view class="amount f32 c333">数量：1</view>
					</view>
				</view>
				
			</view>
			
			<view class="order-item">
				<view class="top">
					<view class="number f32 c333">订单号：1828743646475</view>
					<view class="pend f30"><text>订</text>待审核</view>
				</view>
				<view class="bottom">
					<view class="time f32 c666">下单时间：2020-03-23 16:23:34</view>
					<view class="box">
						<view class="prie f32 c333">金额：¥23.00</view>
						<view class="amount f32 c333">数量：1</view>
					</view>
				</view>
				
			</view>
		</view>
	
		
		
		
	</view>
	
	
	
</template>

<script>
	export default{
		data(){
			return{
				selectTab: 0, //选中的栏目名称
				tabList:[
					{
						name:'全部订单'
					},
					{
						name:'待店家审核'
					},
					{
						name:'已审核'
					}
				]
			};
		},
		onLoad() {
			
		},
		methods:{
			setSelectTab(index){
				this.selectTab=index
			}
		}
	}
</script>

<style lang="scss">

	page{
		background-color: #F5F5F5;
	}
	.tabbox{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20upx 0;
		margin-bottom: 30upx;
		background-color: $white-background;
		.tab-item{
			width: 33.333%;	
			padding:15upx 0;
			border-right: 2upx #ddd solid;
			&.active{
				color: #F76E75;
			}
		}
	}
	.order-list{
		.order-item{
			background-color: $white-background;
			margin-bottom: 20upx;
			padding: 35upx 0;
			.top{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 2upx #eee solid;
				padding:0 30upx 30upx 30upx;
				margin-bottom: 25upx;
				.pend{
					color: #249AF6;
					text{
						display: inline-block;
						font-size: 28upx;
						color: #FFFFFF;
						width: 40upx;
						height: 40upx;
						border-radius: 5upx;
						background-color: #249AF6;
						text-align: center;
						margin-right: 15upx;
					}
				}
			}
			.bottom{
				padding:0 30upx;
				.box{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 20upx;
				}
			}
		}
	}
</style>
